<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!--    搜索导航栏-->
    <div>
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="订单编号">
            <el-input v-model="searchData.orderNo" placeholder="请输入订单编号"></el-input>
          </el-form-item>
          <el-form-item label="用户名称">
            <el-input v-model="searchData.username" placeholder="请输入用户名称"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="searchData.status" placeholder="请选择订单状态">
              <el-option label="未支付" value="1"></el-option>
              <el-option label="已支付" value="2"></el-option>
              <el-option label="已取消" value="3"></el-option>
              <el-option label="已关闭" value="4"></el-option>
              <el-option label="已签收" value="5"></el-option>
              <el-option label="已拒收" value="6"></el-option>
              <el-option label="退款处理中" value="7"></el-option>
              <el-option label="已退款" value="8"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker
                v-model="searchData.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

    </div>
    <el-divider></el-divider>

    <el-table ref="table" :data="tableData" border style="width: 100%">
      <el-table-column prop="sn" label="订单号" align="center"></el-table-column>
      <el-table-column prop="contactName" label="买家名称" width="250" header-align="center" align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="mobilePhone" label="手机号码" width="250" align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="amountOfActualPay" label="订单金额" width="250" header-align="center" align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="订单状态" width="170" header-align="center" align="center"
                       :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-tag :type="getStateText(scope.row.state)"><span>{{ state }}</span></el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="gmtOrder" label="订单创建时间" width="280" header-align="center" align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-search" circle size="mini"
                     @click="orderDetail(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      searchData: {
        orderNo: '',
        username: '',
        status: '',
        startDate: '',
        endDate: ''
      },
      tableData: [],
      dialogFormVisible: false,
      state: "",
      editForm: {
        id: '',
        name: '',
        description: '',
        sort: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    search() {
      // 执行搜索逻辑
      // let data = this.qs.stringify(this.searchData)
      // axios
      // axios.post('url', {
      //   name: 'john',
      //   age: 18
      // }, {
      //   headers: {
      //     'Content-Type': 'application/json'
      //   }
      // })
//请求头和参数
      //
      // {
      //   orderNo: this.searchData.orderNo,
      //       username: this.searchData.username,
      //     status: this.searchData.status,
      //     startDate: this.searchData.startDate,
      //     endDate: this.searchData.endDate
      // },
      // {
      //   headers: {
      //     'Content-Type': 'application/json'
      //   }
      // }
      let data = this.qs.stringify(this.searchData)
      console.log("=================================")
      console.log("data")
      let url = "http://localhost:10005/oms/order/search"
      this.axios.post(url,data)
          .then(res => {
            // 处理结果
            console.log("=================================")
            console.log(res)
            this.tableData = res.data.data.list
          })
    },
    resetForm() {
      this.searchData.orderNo = '';
      this.searchData.username = '';
      this.searchData.status = '';
      this.searchData.date = '';
    },
    //状态吗对应状态转换
    // 0=未支付，1=已关闭（超时未支付），2=已取消，3=已支付，4=已签收，5=已拒收，6=退款处理中，7=已退款
    getStateText(state) {
      switch (state) {
        case 0:
          this.state = '未支付'
          return 'warning';
        case 1:
          this.state = '已关闭（超时未支付）'
          return 'danger';
        case 2:
          this.state = '已取消'
          return 'warning';
        case 3:
          this.state = '已支付'
          return 'success';
        case 4:
          this.state = '已签收'
          return 'success';
        case 5:
          this.state = '已拒收'
          return 'danger';
        case 6:
          this.state = '退款处理中'
          return 'danger';
        case 7:
          this.state = '已退款'
          return 'success';
        default:
          this.state = 'danger'
          return '未知状态';
      }

    },
    orderDetail(row) {
      let sn = row.sn;
      let orderId = row.id;
      this.$router.push({
        name: "order-detail",
        query: {sn: sn, orderId: orderId},
      });
    },

    loadAdminList() {
      let url = 'http://localhost:10005/oms/order/orders';
      console.log('url = ' + url);
      // 从localStorage中取出此前存入的jwt
      let localJwt = localStorage.getItem('jwt');
      console.log('localJwt = ' + localJwt);
      this.axios
          //  .create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        this.tableData = response.data.data.list;
        console.log(this.tableData);
      });
    }
  },
  mounted() {
    this.loadAdminList();
  }
}
</script>

<style scoped>

.demo-form-inline {
  margin-top: 30px;
}
</style>